import React, { Component } from 'react'
import style from '@shared/Header/Header.module.less'
import {NavLink, withRouter} from "react-router-dom";
import { history } from '@src/App';
import { SearchOutlined } from '@ant-design/icons';
import defaultImg from '../../assets/image/default.jpg'
import {LogoutRequest} from "@requests/auth";
import {connect} from "react-redux";
import {toast} from "react-toastify";
import {LogoutUser, saveUserCreator} from "@creators/userCreator";



class Header extends Component {
    componentDidMount() {

    }
    logout = async () => {
        if(window.confirm('你确定要退出吗？') == true){
            let response  = await LogoutRequest()
            if(response.code !== 200){
                return toast.warn('网络错误', {
                    autoClose: 1000,
                })
            }
            // console.log('1')
            sessionStorage.clear('user')
            this.props.dispatch(LogoutUser());
            this.props.history.replace('/')
            return toast.success('退出成功', {
                autoClose: 1000,
            })
        }else{
            return
        }
    }
    render() {
        let user = JSON.parse(sessionStorage.getItem("user"))
        // console.log(user)
        let userImg = this.props.user.userImg
        // console.log(userImg)
        if(user === null ){
            return (
                <div className={style.box}>
                    <div className={style.top}>
                        <div className={style.top_left}>
                            logo
                        </div>
                        <div className={style.top_among}>
                            <ul className={style.top_among_ul}>
                                <NavLink activeClassName="selected" className={style.top_among_ul_li} style={{ color: "white" }} to='/Home'>首页</NavLink>
                                {/*<NavLink activeClassName="selected" className={style.top_among_ul_li} style={{ color: "white" }} to='/OnlineTooles'>在线工具</NavLink>*/}
                                <NavLink activeClassName="selected" className={style.top_among_ul_li} style={{ color: "white" }} to='/Musical'>乐谱</NavLink>
                                <NavLink activeClassName="selected" className={style.top_among_ul_li} style={{ color: "white" }} to='/Forum'>论坛</NavLink>
                                <NavLink activeClassName="selected" className={style.top_among_ul_li} style={{ color: "white" }} to='/OnlineCourses'>在线学习</NavLink>
                                <li className={style.top_among_ul_li}>
                                    <input className={style.search} type="text" />
                                    <SearchOutlined style={{ position: 'relative', left: -30 }} />
                                </li>
                            </ul>
                        </div>
                        <div className={style.top_right}>
                            <ul className={style.top_right_User}>
                                <li>
                                    {/*<div onClick={() => history.push(`/User/${123}`)}></div>*/}
                                    <div className={style.userImg} onClick={() => history.push('/Login')} style={{backgroundImage:`url(${defaultImg})`}}></div>
                                </li>
                                <li>
                                    <NavLink to='/Login'>请登录</NavLink>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            )
        }else {
            // console.log(user)
            return (
                <div className={style.box}>
                    <div className={style.top}>
                        <div className={style.top_left}>
                            Musical
                        </div>
                        <div className={style.top_among}>
                            <ul className={style.top_among_ul}>
                                <NavLink activeClassName="selected" className={style.top_among_ul_li} style={{ color: "white" }} to='/Home'>首页</NavLink>
                                {/*<NavLink activeClassName="selected" className={style.top_among_ul_li} style={{ color: "white" }} to='/OnlineTooles'>在线工具</NavLink>*/}
                                <NavLink activeClassName="selected" className={style.top_among_ul_li} style={{ color: "white" }} to='/Musical'>乐谱</NavLink>
                                <NavLink activeClassName="selected" className={style.top_among_ul_li} style={{ color: "white" }} to='/Forum'>论坛</NavLink>
                                <NavLink activeClassName="selected" className={style.top_among_ul_li} style={{ color: "white" }} to='/OnlineCourses'>在线学习</NavLink>
                                <li className={style.top_among_ul_li}>
                                    <input className={style.search} type="text" />
                                    <SearchOutlined style={{ position: 'relative', left: -30 }} />
                                </li>
                            </ul>
                        </div>
                        <div className={style.top_right}>
                            <ul className={style.top_right_User}>
                                <li>
                                    <div className={style.userImg} onClick={() => history.push(`/User/${user.username}`)} style={{backgroundImage:`url(${process.env.REACT_APP_BASE_URL}${userImg})`}}></div>
                                </li>
                                <li>
                                    {/*<NavLink to='/Login'>{}</NavLink>*/}
                                    <div ><a onClick={() => history.push(`/User/${user.username}`)}>{user.username}</a></div>
                                    <div className={style.logout} >
                                         <button onClick={this.logout}>退出登录</button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            )
        }

    }
}
const mapStateToProps = (state) =>({
    user:state.userReducer.user
})
export default connect(mapStateToProps)(withRouter(Header))
